<template>
	<div class="cartcontrol">
		<transition name="move">
			<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart"><i class="iconfont icon-decrease"></i></div>
		</transition>
			<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add" @click.stop.prevent="addCart"><i class="iconfont icon-ADD"></i></div>
	</div>
</template>
<script>
import Vue from 'vue'
export default{
	props:{
		food:Object
	},
	data(){
		return {
			clicked:true
		}
	},
	methods:{
		addCart(event){
			if(!this.food.count){
				Vue.set(this.food,'count',1);
			}else{
				this.food.count++;
			}
			this.$emit('cart-add', event.target); 
		},
		decreaseCart(event){
			if(this.clicked==true){
				this.food.count--;
				this.clicked=!this.clicked
				setTimeout(() => {
		            this.clicked =!this.clicked
		        }, 500)
			}else{
				return
			}
			

		}
	}
}	

</script>
<style lang="stylus" scoped>
.cartcontrol{font-size:0;line-height:24px;}
.cart-decrease{display:inline-block;width:24px;height:24px;vertical-align:top;touch-action:none;transition:all 0.4s linear;}
.cart-decrease .icon-decrease{font-size:20px;color:rgb(0,160,220);padding:2px;}
.cart-count{display:inline-block;font-size:14px;line-height:24px;vertical-align:top;color:#999;padding:0 5px;}
.cart-add{display:inline-block;font-size:24px;touch-action:none;width:24px;height:24px;vertical-align:top;}
.cart-add .icon-ADD{font-size:20px;color:rgb(0,160,220);padding:2px;}	
.move-transition .cart-decrease{transition:all 0.4s linear;transform:rotate(0);}
.move-enter-active, .move-leave-active{opacity:1;transform:translate3d(0,0,0);}
.move-enter, .move-leave-to{opacity:0;transform:translate3d(24px,0,0);}
.move-enter .cart-decrease,.move-leave .cart-decrease{transform:rotate(180deg);}
</style>